EchoEcho.Com
COMPLETE TUTORIALS

THIS PAGE HOME  TUTORIALS  DESIGN  LAYOUT  FIXED 640x480 DESIGN         

EchoEcho.Com
TOOLS & RESOURCES
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

 
  SEARCH THIS SITE

Tell a friend about this site
SUGGEST THIS SITE      

ON THIS PAGE


 VERTICAL DIVISION

 HORIZONTAL DIVISION

 TOP MENU/BANNER

 SIDE MENU

 SAMPLE PAGE

 CONCLUSIONS



 

Fixed 640x480 Design

By the term "Fixed Design" we mean a page that does not change any alignments/spacings no matter which window-size it's viewed with.

A page layouted with a "Fixed 640x480 design" is a fixed designed page that does not have a horizontal scrollbar when viewed in a maximized window on a 640x480 pixel screen.

The advantages of this design are
  • that it allows complete pixel-control of the pagedesign.
  • that the entire page-width can be seen on all screens.

The disadvantage is
  • that it does not allow (the majority of) visitors full use of screens at higher resolutions.


 


IN THIS SECTION



ENVIRONMENT

 SCREEN-RESOLUTION

 SCREEN COLORS

 GRAPHIC STANDARDS

 FONTS

 LOADING TIME

 OPERATING SYSTEMS


DESIGN TECHNIQUES

 TABLE CONTROL

 FRAMES CONTROL

 BROWSER CONTROL

 PRECISION DESIGN

 DYNAMIC DESIGN


LAYOUT

 VARIABLE DESIGN

 FIXED 640x480

 FIXED 800x600


STYLES

 NO-SCROLL DESIGN

 FLAT DESIGN

 DEPTH DESIGN

 TABLE DESIGN

 COOL DESIGN

 FUTURISTIC DESIGN



 
Vertical division
As it was discussed in the article about screen-resolution the visual height of the page varies both with screen resolution and customized browser-toolbars.

This brought us to the conclusion that:
The navigation structure of the page should be kept at the upper 300 pixels of the page.
(Actually the upper 294 pixels to be very precise).

In the samples below this area is shown in a dark gray color.

640x480
800x600
1024x768


This is our first logical division of the page: Into the upper 300 pixels and the rest!

Top of page



Horizontal division

Many webdesigners suggest that the entire page should be viewable even on 640x480 screens. (And if the webdesigners didn't their customers certainly would make them!).

Therefore we will start to look at how a fixed design limited to 640 pixels look on different screens.

The first thing to realize is this: If a page needs a scrollbar there aren't 640 pixels available!
The scrollbar itself will take up 20 pixels, leaving only 620 pixels for the page
.

Look at these examples:

640x480
800x600
1024x768


As you can see, a fixed design at 620 pixels width works okay on 800x600 screens, but on 1024x768 screens the empty space simply takes up some 40% of the screen.

In most cases this will seem stupid to the visitor arriving with this resolution.

A workaround may be to center the content-part of the webpage, leaving blank space to the left and to the right.

Look at this example:

640x480
800x600
1024x768


Centering the content definitely makes the wasted space less obvious. (However, it still does not remove the fact that close to 40% of the screen is left unused for visitors arriving at 1024x768 pixels).

The conclusion is: if you decide to design for 620 pixels width you should center the content.

Top of page



Top menu/banner
Now let's proceed to look at further divisions of the page.

It is obvious, that since the visual height of the page is so limited, one should be very careful when using it.

If you want to add a top-menu or banner it should be as limited in height as possible.

This fact should not lead to the conclusion that a top-menu is a bad idea.

Since the top of the page is very easy to jump to, it is an obvious place for a menu. Just keep in mind, that it reduces the space you have for the rest of the visual page.

In general a top-menu should be kept at 60 pixels height or less.
(Because 60 pixels allows graphic objects of the same size as full and half banners as well as button 2's. See the Graphics Standards article for more)

Top of page



Side menu
The other obvious place for a navigation menu is at the upper left side of the page.

If you decide to use a side-menu you need to divide your page according to it. How much space should be used for the menu?

First off it is recommended to allow the content-part of the page to carry industry standard banners at size 468x60 pixels.

This leaves you with an option to have a menu that is up to 620-468 = 152 pixels wide. If the banner should be allowed a 1-pixel border (which is often required) you're left with a menu at maximum 150 pixels width.

Now with a 150 pixel maximum width for the menu graphic objects at 468x60 and 234x60 becomes irrelevant. They don't fit in the menu no matter what.

Unless we accept to be limited to have only Micro Buttons in the menu we can conclude that the menu must be at least 120 pixels wide (in order to allow the majority of graphic standard-objects to fit).

The gap is thus between 120 pixels and 150 pixels.

When designing for 620 pixel width of the entire page there really aren't any restrictions to what you decide, as long as the menu is kept between 120 and 150 pixels.

However, as we shall see in the next section, 150 pixels is a genius decision when you decide for 800x600 pixel screens.

The final word to say on fixed design for 620 pixel width is that it actually is impossible to have a menu on each side of the content - if the design is made with respect to industry banner sizes.

You might add here, that you don't want banners on your page anyway, so what's the problem?

The focus on the industry standards for banners is not limited to banners only. Since so many sites carry banners, and thus are divided according to the standard sizes of them, many other tools reflect the same standards.

Java applets, animated GIF's, web-photo-collections, real video etc et etc very often adopts the same standards.

This means, that if you decide to not take the banner-standards into account you limit your future options for adding both banners and cool effects to your pages.

Of course it is your decision to make - but an advice is, that since there really aren't any other important factors to take into consideration you might as well divide your pages according to the industry key-measurements rather than just pick a size out of the blue.

The final example in this section shows the logical way to divide the screen when designing for a fixed width of 620 pixels: 60 pixel top-banner/menu with a 120-150 pixel side-menu and 470-500 pixel main-content.

640x480
800x600
1024x768


Top of page



Sample page
We have created a sample-page for you.

Since the sample-page has the rather complex tables required to keep the layout fixed, you are encouraged to save the samplefile for your own design.

All you need to do is delete our dull sample-text and you have a general skeleton for a 640x480 pixels fixed design.

Note: The page uses a 1x1 pixel transparent GIF-image named "pixel.gif".

Click HERE to see the samplepage

Make sure to change your screen-settings to different resolutions in order to see how the page acts.

Top of page



Conclusions
The main conclusions to draw from this page are:
  • Webpages can be designed with pixel precision.
     
  • The main tools to do this are advanced tables and a 1x1 pixel transparent GIF-image.
     
  • If you're not the king of table-design you can use our samplepage as a general skeleton.
     
  • No matter how fixed your design is, if you place an object that exceeds the available space it will stretch the design. You can't place a 300x300 pixel image in a fixed menu-cell designed for a maximum width of 150 pixels.
     
  • Before choosing to layout your page with a 640x480 pixel fixed design you should consider an 800x600 pixel fixed design as well as a variable designed page.

  •  
  • If you want to add to the techniques mentioned here for a pixel-precise and flexible design you should consider adding cascading style sheets to your skill-toolbox.
 





EchoEcho.Com
COMPLETE TUTORIALS
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 

EchoEcho.Com
TOOLS & RESOURCES


(c) Copyright 1998-1999 NetKontoret - All Rights Reserved        


Tell Your Friends About EchoEcho.Com!
Your name and e-mail-address will appear
as "sender" in the mail sent to your friends.

Your Own Name:
Your Own E-mail:

Friends E-mail 1:
Friends E-mail 2:
Friends E-mail 3:

Your Comment:


PRIVACY STATEMENT:
This Tool Sends Out One E-mail To Each Friend
The Information Will Not Be Used For Any Other Purpose.

Click Here!